<!--
*@Author: QWP
*@Description: 待办事项
*@Date: 2024-07-14 16:47:58
-->
<template>
  <u-card title="在岗(值班)">
    <a-list :data-source="commonDatas"
      :grid="{ gutter: [12, 12], column: 3 }">
      <template #renderItem="{ item }">
        <a-row :gutter="[12, 12]" justify="center">
          <a-progress type="circle" :percent="(item.number / item.total) * 100"
            :size="94"
            :strokeWidth="8">
            <template #format="percent">
              <span style="font-family: DIN, DIN;
                font-weight: 500;
                font-size: 20px;
                color: #333333;">{{ item.number }}</span>  
              <span style="font-family: DIN-Regular;
                font-weight: 500;
                font-size: 20px;
                color: #999;">/ {{ item.total }}</span>
            </template>
          </a-progress>
          <a-col :span="24" align="center">
            <span style="font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #333333;">{{ item.name }}</span>
          </a-col>
        </a-row>
      </template>
    </a-list>
  </u-card>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { FolderOpenOutlined  } from  '@ant-design/icons-vue'

const commonDatas = reactive([
  { name: '在岗(值班)人员', number: 22, total: 40 },
  { name: '备勤人数', number: 10, total: 15  },
  {  name: '请假人数', number: 5, total: 40  },
])

</script>

<style lang='scss' scoped>
</style>